<template>
	<view>
		<view class="pd24_20">
			<view class="bgbox"> </view>
			<view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
				<view class="flex alcenter">
					<view class="member-face">
						<image class="face" :src="statics.defaultFace"></image>
					</view>
					<view class="ml15">
						<view class="ft16 cl-main">暂未登录</view>
						<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
					</view>
				</view>
				<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
			</view>
			<view v-else class="flex alcenter space">
				<view class="flex alcenter" @click="opgrzl()">
					<view class="member-face">
						<image class="face" :src="user.avatar?user.avatar:'../../../static/img/yh.png'"
							mode="aspectFill"></image>
						<!-- <image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[3]:statics.vipLevelImg[0]"></image> -->
					</view>
					<view class="ml15">
						<view class="ft16 cl-main">{{ user.nickname || '' }}</view>
						<view class="mt12 ft12 cl-notice" style="color:#231d1d">ID:{{ user.id || '' }}</view>
					</view>
				</view>
				<view class="btn-mini opsetads" @click="opset">
					<text class="yticon icon-shezhi ft24 cl-notice"></text>
				</view>
			</view>
			<navigator open-type="navigate" url="/pages/client/tuan/tixian">
				<view class="box pd16_15 mt16 flex alcenter space">
					<view class="flex alcenter">
						<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">我要提现</text>
					</view>
					<text class="iconfont iconicon_arrow_small cl-notice"></text>
				</view>
			</navigator>
			<navigator open-type="navigate" url="/pages/client/tuan/zfb">
				<view class="box pd16_15 mt16 flex alcenter space">
					<view class="flex alcenter">
						<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">绑定支付宝</text>
					</view>
					<text class="iconfont iconicon_arrow_small cl-notice"></text>
				</view>
			</navigator>

			<navigator open-type="navigate" url="/pages/client/tuan/syjj">
				<view class="box pd16_15 mt16 flex alcenter space">
					<view class="flex alcenter">
						<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">收益记录</text>
					</view>
					<text class="iconfont iconicon_arrow_small cl-notice"></text>
				</view>
			</navigator>

			<!-- <navigator open-type="navigate" url="/pages/client/tuan/ewm">
				<view class="box pd16_15 mt16 flex alcenter space">
					<view class="flex alcenter">
						<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">获取二维码</text>
					</view>
					<text class="iconfont iconicon_arrow_small cl-notice"></text>
				</view>
			</navigator> -->

			<view class="box pd16_15 mt16 flex alcenter space" @click="ewm()">
				<view class="flex alcenter">
					<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
					<text class="ml15 ft14 ftw500 cl-main">获取二维码</text>
				</view>
				<text class="iconfont iconicon_arrow_small cl-notice"></text>
			</view>


		</view>

		<view class="button">
			<view class="button_1" @click="user_htm()">
				订单
			</view>
			<view class="button_1 button_1_1">
				我的
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<view class="bg-img" style="background-image: url('../../static/img/alarm.png');height:250px;">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<img :src="ewm_img" />
			<button @click="close" style="background-color: red;">关闭</button>
			<button @click="xiazai()">下载</button>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				isLogin: false,
				showLogin: false,
				isBirthday: true,
				showBirthday: false,
				showQrcode: false,
				avatar: '',
				userinfo: [],
				user: {},
				banners: [],
				mendian: [],
				vipLevel: 0,
				iskq: 0,
				Ordertype: [],
				ewm_img: '',
				memberMenus: [{
						name: '我的会员',
						type: 'link',
						model: '',
						link: '/pages/client/vipcard/index',
						icon: this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',
						show: 1
					},
					{
						name: '我的订单',
						type: 'link',
						model: '',
						link: '/pages/client/shop/order',
						icon: this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',
						show: 1
					},
					{
						name: '收货地址',
						type: 'link',
						model: '',
						link: '/pages/client/member/address',
						icon: this.$config.staticUrl + 'vipcard_icon_my_address@2x.png',
						show: 1
					},
					{
						name: '官方商城',
						type: 'link',
						model: '',
						link: '/pages/client/shop',
						icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
						show: 0
					},
					{
						name: '分销中心',
						type: 'link',
						model: '',
						link: '/pages/client/member/mytuandui',
						icon: this.$config.staticUrl + 'vipcard_icon_my_invite@2x.png',
						show: 1
					},
					{
						name: '申请门店',
						type: 'link',
						model: '',
						link: '/pages/client/member/mendian',
						icon: this.$config.staticUrl + 'vipcard_icon_my_card@22x.png',
						show: 1
					},
					{
						name: '专属顾问',
						type: 'link',
						model: '',
						link: '/pages/client/vipcard/adviser',
						icon: this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',
						show: 1
					},
				],
			}
		},
		computed: {
			getMenus() {
				let arr = new Array;
				for (var a in this.memberMenus) {
					if (this.memberMenus[a].show == 1) {
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		onLoad() {

		},
		onShow() {
			this.mendian = uni.getStorageSync("mendian");
			if (uni.getStorageSync("token")) {
				this.isLogin = true;
				this.ongrzlTap();
			} else {
				this.isLogin = false;
				this.showLogin = false;
				this.userinfo.isLogin = false
			}

		},
		onShareAppMessage(e) {

		},
		onShareTimeline(e) {

		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			if (uni.getStorageSync("token")) {
				this.isLogin = true;
				this.ongrzlTap();
			} else {
				this.isLogin = false;
				this.showLogin = false;
				this.userinfo.isLogin = false
			}
			this.banners = uni.getStorageSync("config").banner
			uni.stopPullDownRefresh();
		},
		methods: {
			user_htm() {
				uni.redirectTo({
					url: '/pages/client/tuan/order',
					fail: (res) => {
						console.log(res);
					}
				});
			},
			ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("token");
				this.$ajax('post', 'user/index').then(res => {
					this.user = res.data.user;
					this.Ordertype = res.data.order
					uni.setStorage({ // 缓存配置信息
						key: 'userinfo',
						data: res.data.user
					})
				})
			},
			opod(state) {
				uni.navigateTo({
					url: '/pages/client/shop/order?state=' + state
				})
			},
			setTabBarBadges(count) {
				if (count >= 99) {
					count = '99+'
				}
				if (count <= 0) {
					uni.removeTabBarBadge({
						index: 2
					})
				} else {
					uni.setTabBarBadge({
						index: 2,
						text: "" + count + ""
					})
				}
			},
			memberLinkTo(e) {
				let index = parseInt(e.currentTarget.dataset.index);
				if (this.isLogin == false && this.getMenus[index].model != 'integral') {
					this.showLogin = true;
				} else {
					if (this.getMenus[index].link != '') {
						if (this.getMenus[index].model == 'integral') {
							uni.redirectTo({
								url: this.getMenus[index].link
							})
						} else {
							uni.navigateTo({
								url: this.getMenus[index].link
							})
						}
					}
				}
			},
			birthdayAct() {
				if (this.isBirthday) {
					uni.navigateTo({
						url: '/pages/client/member/birthday'
					})
				} else {
					uni.navigateTo({
						url: '/pages/client/member/info'
					})
				}
			},
			showLoginAct() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						this.$ajax('post', 'login/wechat', {
							code: event.code
						}).then(res => {
							uni.setStorage({ //缓存配置信息
								key: 'token',
								data: res.data.token
							})
							setTimeout(() => {
								this.ongrzlTap();
								this.isLogin = true;
								if (uni.getStorageSync("shareid")) {
									this.$ajax('post', 'share/user', {
										user_id: uni.getStorageSync("shareid")
									})
								}
							}, 200)
						})
					},
					fail: function(err) {
						// 登录授权失败
						// err.code是错误码
					}
				})
			},
			loginYes() {

			},
			opgrzl() {
				uni.navigateTo({
					url: '/pages/set/grzl/grzl'
				})
			},
			opset() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			ewm() {
				this.$refs.popup.open('top')
				this.$ajax('post', 'bus.user/ewm').then(res => {
					this.ewm_img = res.data
				})
			},
			close() {
				this.$refs.popup.close()
			},
			xiazai() {
				var imgurl = this.ewm_img
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							// 已授权，直接保存图片
							uni.downloadFile({
								url: imgurl,
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: '保存成功',
													duration: 2000,
												})
											},
											fail: function() {
												uni.showToast({
													title: '保存失败，请稍后重试',
													icon: 'none',
												})
											},
										})
									}
								},
							})
						} else if (res.authSetting['scope.writePhotosAlbum'] === false) {
							// 用户已拒绝授权，提示用户授权
							uni.showModal({
								title: '提示',
								content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success: function(res) {
												if (res.authSetting[
														'scope.writePhotosAlbum']) {
													uni.downloadFile({
														url: imgurl,
														success: (res) => {
															if (res
																.statusCode ===
																200) {
																uni.saveImageToPhotosAlbum({
																	filePath: res
																		.tempFilePath,
																	success: function() {
																		uni.showToast({
																			title: '保存成功',
																			duration: 2000,
																		})
																	},
																	fail: function() {
																		uni.showToast({
																			title: '保存失败，请稍后重试',
																			icon: 'none',
																		})
																	},
																})
															}
														},
													})
												}
											},
										})
									} else if (res.cancel) {
										uni.showToast({
											title: '您取消了授权',
											icon: 'none',
											duration: 2000,
										})
									}
								},
							})
						} else {
							// 用户第一次调用，调用授权接口
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.downloadFile({
										url: imgurl,
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: '保存成功',
															duration: 2000,
														})
													},
													fail: function() {
														uni.showToast({
															title: '保存失败，请稍后重试',
															icon: 'none',
														})
													},
												})
											}
										},
									})
								},
								fail() {
									uni.showToast({
										title: '授权失败，请稍后重试',
										icon: 'none',
										duration: 2000,
									})
								},
							})
						}
					},
				})


			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.popup {
		background-color: #fff;
		/* 背景颜色 */
		margin: 20px;
		/* 边距 */
		padding: 10px;
		/* 内填充 */
		width: 300px;
		/* 宽度 */
		height: 200px;
		/* 高度 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		text-align: center;
		/* 文本居中 */
	}

	.bgbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 297rpx;
		background-color: #01B750;
		z-index: -1;
	}

	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -36rpx;
	}

	.member-face .face {
		width: 160rpx;
		height: 160rpx;
		border: 6rpx solid #FFFFFF;
		background: #FFFFFF;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
	}

	.miniapp-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}

	.dgfdh {
		background: #ff0000 !important;
		position: absolute;
		top: -30upx;
		width: auto !important;
		right: 0px;
		border-radius: 50%;
		overflow: hidden;
	}

	.dgfdh text {
		border-radius: 50%;
		overflow: hidden;
		padding: 0 !important;
	}

	.opsetads {

		background: #FFFFFF;
		color: #000000;
		width: 70upx;
		line-height: 70upx;
		height: 70upx;
		text-align: center;
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg) skew(0deg) scale(1);
			-ms-transform: rotate(0deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(0deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(0deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(0deg) skew(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) skew(0deg) scale(1);
			-ms-transform: rotate(360deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(360deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(360deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(360deg) skew(0deg) scale(1);
		}
	}

	.home-mendian {
		width: 100%;
		height: 70rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
	}

	.button {
		display: flex;
		font-size: 14px;
		position: fixed;
		bottom: 0;
		width: 100%;

	}

	.button_1 {
		font-size: 18px;
		width: 50%;
		text-align: center;
		float: left;
		height: 40px;
		line-height: 40px;
	}

	.button_1_1 {
		color: #fff;
		background-color: #01B750;
	}
</style>